<template>
  <div class="main" ref="batchlist">
    <ul class="menu2">
      <li> 需求发布提醒
        <van-switch class="right" @change="saveTX" size="12px" v-model="cgtx"/>

         
      </li>
    </ul>
    <!-- <div class="title">
                            <h1 class="left"></h1>
                            <h1 class="right"></h1>
                            定制需求
                        </div>
                        <ul class="demand">
                            <li style="background:#bce380;">
                                <h4>快速查找</h4>
                                <i class="iconfont icon-zhaohuoshenqi animated bounceIn"></i>
                                <h5>常用规格棉花资源</h5>
                            </li>
                            <li style="background:#6bbcdd;">
                                <h4 >规格查找</h4>
                                <i class="iconfont icon-guigecanshu animated bounceIn" style="color:#6bbcdd;"></i>
                                <h5>定制规格棉花资源</h5>
                            </li>
                            <li style="background:#5cc0ab;">
                                <h4>实时提醒</h4>
                                <i class="iconfont icon-tixing1 animated bounceIn"  style="color:#5cc0ab;"></i>
                                <h5>新定制需求通知</h5>
                            </li>
                        </ul>
                        <ul class="menu">
                            <li>
                                接收定制提醒<van-switch class="right" size="28px" v-model="dztx" />
                            </li>
                            <li>
                                接收采购需求提醒<van-switch class="right"  size="28px" v-model="cgtx" />
                            </li>
    </ul>-->
    <!-- <div class="tixing">
                            <i class="iconfont icon-volume_icon"></i>
                            接收定制提醒 接收采购需求提醒
                        </div>
                        <ul class="dingzhi">
                            <li>
                                <i class="iconfont icon-37"></i>
                                <h3>快速找货</h3>
                                <h5>方便随时查找常用规格棉花资源</h5>
                            </li>
                            <li>
                                <i class="iconfont icon-guige"></i>
                                <h3>多品种规格查找</h3>
                                <h5>可同时定制10条常用品种规格</h5>
                            </li>
                            <li>
                                <i class="iconfont icon-tixing"></i>
                                <h3>实时提醒</h3>
                                <h5>有新的符合定制需求的资源上架第一时间通知您</h5>
                            </li>
    </ul>-->
    <van-list class="list" v-model="loading" :finished="finished" @load="onLoad">
      <supply v-for="(item,index) in list" :batch="item" :key="index"></supply>
      <batch
        :manage="true"
        v-show="active==0"
        v-for="(item,index) in batchList"
        :batch="item"
        :key="'b'+index"
      ></batch>
    </van-list>
    <van-button type="primary" size="small" class="btn" @click="goDingZhi" :block="true">
      <i class="iconfont icon-jiahao"></i>需求发布
    </van-button>
    <share :show="false"></share>
    <kefu></kefu>
    <query></query>
  </div>
</template>

<script>
import api from "@/api/api";
import kefu from "@/components/kefu";
import share from "@/components/share";
import query from "@/components/query";
import { Toast, DatetimePicker } from "vant";
import supply from "@/components/supply";
export default {
  components: {
    supply: supply,
    share,
    kefu,
    query,
    pageIndex: 1
  },
  data() {
    return {
      dztx: false,
      cgtx: true,
      list: [],
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      finished: false,
      batchList: []
    };
  },
  methods: {
    saveTX() {
      api
        .updateTZ({
          DZTX: this.dztx ? 1 : 0,
          XQTX: this.cgtx ? 1 : 0,
          OpenID: this.$store.state.userInfo.OpenID
        })
        .then(res => {
          if (res) {
            this.$store.commit("setUserInfo", res);
          }
        });
    },
    goDingZhi() {
      if (!this.$store.state.userInfo.ID) {
        Toast.fail("请先注册!");
        return;
      }
      if (this.$store.state.userInfo.isBlack) {
        return;
      }
      this.$router.push("/user/supplyAdd");
    },
    doGetList() {
      if (this.$store.state.userInfo.isBlack) {
        return;
      }
      var UserID = this.$route.query.UserID;
      var para = {
        UserID: UserID ? UserID : 0,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      };
      api.getSupplyAll(para).then(res => {
        this.batchList = res.data;
        this.count = res.count;
        this.isLoading = false;
        if (this.count) {
          Toast({
            message:
              "已加载 " +
              (this.count < this.pageSize
                ? this.count
                : this.pageIndex * this.pageSize) +
              "/" +
              this.count +
              " 条记录",
            position: "bottom",
            duration: 1500
          });
        } else {
          Toast({
            message: "未查询到记录",
            position: "bottom",
            duration: 1500
          });
          this.showNoData = true;
        }
      });
    },
    onLoad() {
      if (this.$store.state.userInfo.isBlack) {
        return;
      }
      var UserID = this.$route.query.UserID;
      if (this.active == 0) {
        this.doGetList();
        return;
      }
      if (this.running) {
        return;
      }
      this.running = true;
      var para = {
        UserID: UserID ? UserID : 0,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      api.getSupplyAll(para).then(res => {
        this.loading = false;
        this.count = res.count;
        this.running = false;
        res.data.forEach(n => {
          n.checked = false;
          this.list.push(n);
        });
        if (res.data.length == 0) {
          this.finished = true;
          Toast({
            message: "已加载全部",
            position: "bottom",
            duration: 1500
          });
        } else {
          Toast({
            message:
              "已加载" +
              (this.pageIndex * this.pageSize > this.count
                ? this.count
                : this.pageIndex * this.pageSize) +
              "/" +
              this.count,
            position: "bottom",
            duration: 1500
          });
          this.pageIndex++;
        }
      });
    }
  },
  created() {
    if (this.$store.state.userInfo.isBlack) {
      return;
    }
    var UserID = this.$route.query.UserID;
    // api.getSupplyAll({
    //     UserID: UserID ? UserID : 0,
    //     pageIndex: this.pageIndex,
    //     pageSize: this.pageSize,
    // }).then(res => {
    //     this.list = res.data;
    // })
  }
};
</script>

<style scoped lang='less'>
.main {
  padding-top: 30px;
  text-align: left;
  margin-bottom: 100px;
  .menu2 {
    top: 0;
    position: fixed;
    z-index: 99;
    width: 100%;
    background: #f2f2f2;
    .action {
      position: absolute;
      top: 0;
      right: 10px;

      span {
        height: 1.5em;
        padding: 5px 10px;
        background: #f89393;
        color: #fff;
      }
      .btnsel {
        background: #2c3e50;
      }
    }
    li {
      position: relative;
      height: 3em;
      line-height: 3em;
      padding: 0 1em;
      margin-bottom: 2px;
      display: block;
      font-size: 12px;
      border-bottom: 1px solid #ccc;
    }
    .right {
      top: 0.2em;
      position: relative;
      margin-right: 5px;
    }
  }
  .btn {
    width: 50%;
    margin: 3em auto;
    background: #f89393;
    border-color: #f89393;
    font-size: 16px;
    height: 2.5em;
    position: fixed;
    bottom: 40px;
    left: 25%;
  }
  .tixing {
    > div {
      position: relative;
      top: 5px;
      margin: 0 5px;
    }
  }
  .menu {
    margin-top: 20px;
    li {
      position: relative;
      height: 3em;
      line-height: 3em;
      padding: 0 1em;
      margin-bottom: 2px;
      background: #fff;
    }
    .right {
      top: 0.3em;
      right: 1em;
      position: absolute;
    }
  }
  .demand {
    display: flex;
    color: #fff;
    background: #fff;
    padding: 10px;
    h4 {
      text-align: center;
      margin: 6px;
    }
    h5 {
      font-size: 12px;
      text-align: center;
      margin: 6px auto;
    }
    i {
      font-size: 28px;
      display: block;
      text-align: center;
      width: 1.6em;
      height: 1.6em;
      line-height: 1.6em;
      border-radius: 50%;
      background: #fff;
      color: #bce380;
      margin: 0 auto;
    }
    li {
      flex: 1;
      margin-left: 10px;
    }
  }
  .title {
    margin-top: 20px;
    position: relative;
    font-size: 16px;
    background: #fff;
    height: 3.4em;
    line-height: 3.4em;
    text-align: center;
    font-weight: bold;
    h1 {
      font-size: 16px;
      position: absolute;
      top: 1.1em;
      width: 20%;
      background: #333;
      height: 1px;
    }
    .left {
      left: 15%;
    }
    .right {
      right: 15%;
    }
  }
  .dingzhi {
    margin-bottom: 2em;
    li {
      display: inline-block;
      padding-left: 5em;
      height: 5em;
      position: relative;
      color: #666;
      h3 {
        margin-top: 20px;
        line-height: 2em;
        color: #333;
      }
      h5 {
        font-weight: normal;
        color: #666;
      }
      i {
        position: absolute;
        left: 0.5em;
        top: 30px;
        font-size: 30px;
      }
    }
  }
}
</style>